import Book from "../../model/Book.ts";
import {useState} from "react";
import * as bootstrap from "bootstrap";


const ModalContent = (props: { bookList: Book[], setBookId: (bookId: string) => void  }) => {

    const {bookList, setBookId} = props
    const [activeIndex, setActiveIndex] = useState(0);
    const [message, setMessage] = useState('')

    const handleClick = (index, bookId) => {
        setActiveIndex(index);
        setBookId(bookId)
    };

    if (bookList.length > 0) {
        setBookId(bookList[0].bookId)
    }




    const toastLiveExample = document.getElementById('liveToast');

    const triggerToast = () => {
        const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
        toastBootstrap.show();
    };


    return (

        <ol className="list-group list-group-numbered rounded-5">

            {bookList.map((book, index) => (
                <li
                    key={index}
                    className={`list-group-item list-group-item-action d-flex justify-content-between align-items-start ${index === activeIndex ? 'active' : ''}`}
                    onClick={() => handleClick(index, book.bookId)}
                >
                    <div className="ms-2 me-auto">
                        <div className="fw-bold">ID {book.bookId}</div>
                        Condition: {book.condition}
                    </div>
                    <span className="badge rounded-pill">Provided by {book.ownerId}</span>
                </li>
            ))}


        </ol>
    )
}

export default ModalContent
